<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="8" :offset="0">
                <el-card style="height:80vh;">
                    <div slot="header">
                        <h4>菜单标题</h4>
                        <span style="color:#888888;">点击组件，添加至页面</span>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="12" :offset="0" v-for="(item,index) in components" :key="index"
                            style="margin-bottom: 15px;">
                            <el-card @click.native="chooseTemplate(item)" shadow="hover"
                                :body-style="{ padding: '15px 8px',cursor: 'pointer'}">
                                <div class="" style="display: flex;align-items: center;">
                                    <i style="color:#13c661;font-size:16px;margin-right:5px" :class="item.icon" />
                                    <span style="font-size: 15px;">{{item.title}}</span>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="8" :offset="0">
                <el-card style="min-height: 80vh;overflow:inherit;" :body-style="{padding:'10px 8px'}">
                    <img src="./status.png" style="width:100%;margin-bottom: 10px;">

                    <div style="margin-left: -10px;margin-right: -10px;">
                        <div class='checked-box' @click="handleTemplate(item)"
                            :class="item.checked?'checked-box-active':''" v-for="(item,index) in templates"
                            :key="index">
                            <!-- 操作按钮 -->
                            <div class="checkbox-btns" v-if="item.checked">
                                <i class="el-icon-top " @click.stop="moveUp(index)"
                                    :class="index===0?'i-disabled':''" />
                                <i class="el-icon-bottom" @click.stop="moveDown(index)"
                                    :class="(index+1)===templates.length?'i-disabled':''" />
                                <i class="el-icon-delete" @click.stop="deleteTemplate(index)" />
                            </div>
                            <!-- 组件 -->
                            <template v-if="item.type==='search'">
                                <search-bar :placeholder="item.placeholder" />
                            </template>
                            <template v-else-if="item.type==='list'">
                                <list :title="item.title" :listType="item.listType" :showMore="item.showMore" :data="item.data" />
                            </template>
                            <template v-else-if="item.type==='swiper'">
                                <swiper  :list="item.data" />
                            </template>
                            <template v-else-if="item.type==='icons'">
                                <icons  :list="item.data" />
                            </template>
                            <template v-else-if="item.type == 'coupon'">
                                <coupon :list="item.data"></coupon>
                            </template>
<template v-else-if="item.type == 'promotion'">
                                <promotion :title="item.title" :list="item.data" :listType="item.listType"></promotion>
                            </template>
<template v-else-if="item.type == 'imageAd'">
                                <image-ad :list="item.data"></image-ad>
                            </template> 
                            <!-- <div style="height: 100px;border:1px solid;display:flex;align-items:center;justify-content:center">{{item.type}}</div> -->
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col v-show="currentComponent.type && currentComponent.type != 'coupon'" :span="8" :offset="0">
                <!-- <div style="position:fixed;right:40px;top:100px;"> -->
                <el-card style="height:80vh;overflow-y: auto;">
                    <div slot="header">
                        <span>
                            编辑组件
                        </span>
                    </div>
                    <div style="overflow-y: auto;position: relative;left: 0;right: 0;bottom:0;top:0;">
                        <component-form @change="componentChange" ref="componentForm" :formType="currentComponent.type">
                        </component-form>
                    </div>
                </el-card>
                <!-- </div> -->
            </el-col>
        </el-row>

    </div>
</template>
<script>
    import util from '@/utils/utils';
    import searchBar from './components/search-bar.vue';
    import componentForm from './components/component-form.vue';
    import list from './components/list.vue';
    import swiper from './components/swiper.vue';
    import imageAd from './components/imageAd.vue'
    import icons from './components/icons.vue'
    import coupon from './components/coupon.vue'
    import promotion from './components/promotion.vue'

    export default {
        name: 'edit',
        components: {
            searchBar,
            componentForm,
            list,
            swiper,
            icons,
            coupon,
            promotion,
            imageAd
        },
        data() {
            return {
                components: [{
                    icon: "el-icon-s-order",
                    title: "课程列表",
                    type: "list",
                    default: {
                        listType: 'one',
                        title: '标题',
                        showMore: true,
                        more: false,
                        data:[]
                    }
                }, {
                    icon: "el-icon-search",
                    title: "搜索框",
                    type: "search",
                    default: {
                        placeholder: '请输入搜索关键字'
                    }
                },{
                    icon: "el-icon-s-help",
                    title: "轮播图",
                    type: "swiper",
                    default: {
                        data:[]
                    }
                },{
                    icon: "el-icon-menu",
                    title: "图标分类",
                    type: "icons",
                    default: {
                        data:[{
                            src:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                            name:"分类",
                            type:"",
                            url:"",
                            page_id:0,
                            page_title:"",
                            course_title:"",
                            course_id:"",
                        },{
                            src:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                            name:"分类",
                            type:"",
                            url:"",
                            page_id:0,
                            page_title:"",
                            course_title:"",
                            course_id:"",
                        },{
                            src:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                            name:"分类",
                            type:"",
                            url:"",
                            page_id:0,
                            page_title:"",
                            course_title:"",
                            course_id:"",
                        },{
                            src:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                            name:"分类",
                            type:"",
                            url:"",
                            page_id:0,
                            page_title:"",
                            course_title:"",
                            course_id:"",
                        }]
                    }
                },{
                    icon: "el-icon-s-finance",
                    title: "优惠券",
                    type: "coupon",
                    default: {
                        data:[{
                            price:100,
                            condition:"满￥200可用"   
                        },{
                            price:100,
                            condition:"满￥200可用"   
                        },{
                            price:100,
                            condition:"满￥200可用"   
                        },{
                            price:100,
                            condition:"满￥200可用"   
                        }]
                    }
                },{
                    icon: "el-icon-s-order",
                    title: "限时拼团",
                    type: "promotion",
                    default: {
                        listType: "group",
                        title: "拼团",
                        data: []
                    }
                },{
                    icon: "el-icon-picture-outline",
                    title: "图片广告",
                    type: "imageAd",
                    default: {
                        data:[]
                    }
                }],
                templates: [

                ]
            };
        },
        computed: {
            currentComponent() {
                let i = this.templates.findIndex(v => v.checked)
                return this.templates[i] || {}
            }
        },
        methods: {
            componentChange(options) {
                // let i=this.templates.findIndex(v=>v.checked)
                // if(i!==-1){
                //     this.templates[i][options.key]=options.value
                // }
                this.currentComponent[options.key]=options.value;
            },
            chooseTemplate(row) {
                let data = JSON.parse(JSON.stringify(row.default))
                data.checked = false
                data.type = row.type
                this.templates.push(data)
            },
            handleTemplate(row) {
                this.templates.map(item => {
                    item.checked = false
                    return item
                })
                row.checked = true
                if(row.type!=='coupon'){
                    this.$refs.componentForm.initVal(row)
                }
            },
            deleteTemplate(index) {
                this.$confirm('是否要删除该组件', '提示', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning',
                }).then(action => {
                    this.templates.splice(index, 1);
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });

                }).catch(err => {

                })

            },
            moveUp(index) {
                if (index === 0) {
                    return
                }
                util.moveUp(this.templates, index)
            },
            moveDown(index) {
                if (index === this.templates.length - 1) {
                    return
                }
                util.moveDown(this.templates, index)
            }
        },
    };
</script>
<style>
    .checked-box {
        cursor: pointer;
        position: relative;
    }

    .checked-box-active {
        border: 2px dotted #2196f3;
        padding: 5px 0;
        margin-bottom: 10px;
    }

    .checkbox-btns {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: -2px;
        z-index: 999;
        right: -30px;
        border: 2px dotted #2196f3;
        border-left-width: 0;
        cursor: pointer;
        background-color: #fff;
    }

    .checkbox-btns i {
        padding: 4px 6px;
        color: #2196f3;
        font-weight: bold;
    }

    .checkbox-btns i:hover {
        background-color: #eeeeee;
    }

    .checkbox-btns .i-disabled {
        cursor: no-drop;
        background-color: #fff;
        color: #bbb;
    }
</style>